<!--
产品管理—产品特色页
凌辉
2017-5-25
-->
<template>
  <el-row>
    <el-col style="width: 122px;">
      产品经理推荐：
      <p style="color: red;">(不少于2个选项)</p>
    </el-col>
    <el-col style="width: 80%">
      <el-col>
        <el-autocomplete
          style="margin: 5px"
          v-model="traffic1" :disabled="pageType === 'look'||pageType === 'audits'"
          :fetch-suggestions="querySearch"
          placeholder="==请选择=="
          id="color_c"></el-autocomplete>
        ：
        <el-input v-model="traffic1_1" :disabled="pageType === 'look'||pageType === 'audits'" style="width:450px;margin: 5px" placeholder="请输入内容" id="color_c"/>
        <span style="color: red"
              v-if="(traffic1!==''&&traffic1_1==='')||(traffic1===''&&traffic1_1!=='')"> 请输入完整的推荐信息</span>
      </el-col>
      <el-col>
        <el-autocomplete
          style="margin: 5px"
          v-model="traffic2" :disabled="pageType === 'look'||pageType === 'audits'"
          :fetch-suggestions="querySearch"
          placeholder="==请选择=="
          id="color_c"></el-autocomplete>
        ：
        <el-input v-model="traffic2_2" :disabled="pageType === 'look'||pageType === 'audits'" style="width:450px;margin: 5px" placeholder="请输入内容" id="color_c"/>
        <span style="color: red"
              v-if="(traffic2!==''&&traffic2_2==='')||(traffic2===''&&traffic2_2!=='')"> 请输入完整的推荐信息</span>
      </el-col>
      <el-col>
        <el-autocomplete
          style="margin: 5px"
          v-model="traffic3" :disabled="pageType === 'look'||pageType === 'audits'"
          :fetch-suggestions="querySearch"
          placeholder="==请选择=="
          id="color_c"></el-autocomplete>
        ：
        <el-input :disabled="pageType === 'look'||pageType === 'audits'" v-model="traffic3_3" style="width:450px;margin: 5px" placeholder="请输入内容" id="color_c"/>
        <span style="color: red"
              v-if="(traffic3!==''&&traffic3_3==='')||(traffic3===''&&traffic3_3!=='')"> 请输入完整的推荐信息</span>
      </el-col>
      <el-col>
        <el-autocomplete
          style="margin: 5px"
          v-model="traffic4" :disabled="pageType === 'look'||pageType === 'audits'"
          :fetch-suggestions="querySearch"
          placeholder="==请选择=="
          id="color_c"></el-autocomplete>
        ：
        <el-input v-model="traffic4_4" :disabled="pageType === 'look'||pageType === 'audits'" style="width:450px;margin: 5px" placeholder="请输入内容" id="color_c"/>
        <span style="color: red"
              v-if="(traffic4!==''&&traffic4_4==='')||(traffic4===''&&traffic4_4!=='')"> 请输入完整的推荐信息</span>
      </el-col>
    </el-col>
    <el-col>
      <el-button type="primary" :disabled="pageType === 'look'||pageType === 'audits'" @click="handleSubmit" :loading="saveNextLoading">保存并下一步</el-button>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      productIdConfig: {
        type: Number
      },
      pageType: {
        type: String
      }
    },
    data () {
      return {
        saveNextLoading: false,
        restaurants: [{'value': '优选航班'}, {'value': '品质住宿'}, {'value': '合理行程'}, {'value': '产值服务'}, {'value': '温馨提醒'}, {'value': '购物狂欢'}, {'value': '特色美食'}, {'value': '劲爆活动'}, {'value': '超值赠送'}],
        traffic1: '',
        traffic1_1: '',
        traffic2: '',
        traffic2_2: '',
        traffic3: '',
        traffic3_3: '',
        traffic4: '',
        traffic4_4: '',
        loginType: '',
        productTourExtend: {
          productId: '',
          recommendReasons: ''
        }
      }
    },
    methods: {
      querySearch (queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSubmit () {
        if (this.productIdConfig <= 0) {
          this.$message({
            message: '请先填写基本信息',
            type: 'error'
          })
          this.$emit('saveNext', '0')
          return
        }
        let str = ''
        if ((this.traffic1 !== '' && this.traffic1_1 === '') || (this.traffic1 === '' && this.traffic1_1 !== '')) {
          return
        }
        if ((this.traffic2 !== '' && this.traffic2_2 === '') || (this.traffic2 === '' && this.traffic2_2 !== '')) {
          return
        }
        if ((this.traffic3 !== '' && this.traffic3_3 === '') || (this.traffic3 === '' && this.traffic3_3 !== '')) {
          return
        }
        if ((this.traffic4 !== '' && this.traffic4_4 === '') || (this.traffic4 === '' && this.traffic4_4 !== '')) {
          return
        }
        let count1 = (this.traffic1 !== '' && this.traffic1_1 !== '') ? 1 : 0
        if (count1 === 1) {
          str += this.traffic1 + '-' + this.traffic1_1 + '|'
        }
        let count2 = (this.traffic2 !== '' && this.traffic2_2 !== '') ? 1 : 0
        if (count2 === 1) {
          str += this.traffic2 + '-' + this.traffic2_2 + '|'
        }
        let count3 = (this.traffic3 !== '' && this.traffic3_3 !== '') ? 1 : 0
        if (count3 === 1) {
          str += this.traffic3 + '-' + this.traffic3_3 + '|'
        }
        let count4 = (this.traffic4 !== '' && this.traffic4_4 !== '') ? 1 : 0
        if (count4 === 1) {
          str += this.traffic4 + '-' + this.traffic4_4 + '|'
        }
        let count = count1 + count2 + count3 + count4
        if (count >= 2 && str !== '') {
          this.productTourExtend.recommendReasons = str.substring(0, (str.length - 1))
          this.productTourExtend.productId = this.productIdConfig
          var url = '/smartLight/web/productTourExtend/save.htm'
          var para = {
            productTourExtend: this.productTourExtend,
            type: this.loginType
          }
          this.saveNextLoading = true
          this.$http.post(url, para).then(response => {
            this.saveNextLoading = false
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$emit('saveNext', '2')
            } else if (resBody.isSuccess === 2) {
              this.listLoading = false
              this.$alert(resBody.errorMsg, ' ', {
                type: 'warning'
              }).then(() => {
                this.$router.push({path: '/login'})
                sessionStorage.clear()
              })
            } else {
              this.$message({
                showClose: true,
                message: resBody.errorMsg,
                type: 'error'
              })
            }
          })
        }
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      if (user) {
        user = JSON.parse(user)
        this.loginType = user.type
      }
      if (this.productIdConfig > 0) {
        var para = {
          productId: this.productIdConfig,
          type: this.loginType
        }
        this.$http.post('/smartLight/web/productTourExtend/getById.htm', para).then(response => {
          var resBody = response.body
          if (resBody.isSuccess === 0) {
            this.productTourExtend = resBody.result
            if (this.productTourExtend !== undefined && this.productTourExtend.recommendReasons !== '' && this.productTourExtend.recommendReasons !== undefined) {
              var arrayStr = this.productTourExtend.recommendReasons.split('|')
              for (var i = 0; i < arrayStr.length; i++) {
                var traffic = arrayStr[i].split('-')
                if (i === 0) {
                  this.traffic1 = traffic[0]
                  this.traffic1_1 = traffic[1]
                } else if (i === 1) {
                  this.traffic2 = traffic[0]
                  this.traffic2_2 = traffic[1]
                } else if (i === 2) {
                  this.traffic3 = traffic[0]
                  this.traffic3_3 = traffic[1]
                } else if (i === 3) {
                  this.traffic4 = traffic[0]
                  this.traffic4_4 = traffic[1]
                }
              }
            } else {
              this.productTourExtend = {
                productId: '',
                recommendReasons: ''
              }
            }
          }
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>
